<script setup>
import { ref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import useRegistrationStore from "@/pinia/modules/registrationStore";
import slVehicleViolation from "./components/vehicle-violation";
import slVehicleBreakdown from "./components/vehicle-breakdown";
import slVehicleAccident from "./components/vehicle-accident";
import useTaskStore from "@/pinia/modules/taskStore";

const props = defineProps({
  /*出车时间*/
  actualDepartureTime: {
    type: String,
    required: true,
  },
  /*任务ID*/
  transportTaskId: {
    type: String,
    required: true,
  },
});

const registrationStore = useRegistrationStore();

const taskStore = useTaskStore();

/*回车时间*/
const endTime = ref("");

const submit = async () => {
  try {
    await taskStore.truckRegistration(registrationStore.recordData);
    await uni.reLaunch({ url: "/pages/task/index" });
    uni.showToast({ title: "登记成功", duration: 2000, icon: "success" });
  } catch (error) {
    uni.showToast({ title: "登记失败", duration: 2000, icon: "error" });
  }
};

onLoad(() => {
  registrationStore.recordData.id = props.transportTaskId;
  registrationStore.recordData.startTime = props.actualDepartureTime;
});

watch(endTime, (newValue) => {
  registrationStore.recordData.endTime = newValue;
});
</script>
<template>
  <view class="page-container">
    <scroll-view class="scroll-view" scroll-y>
      <view class="scroll-view-wrapper">
        <uni-list class="base-info">
          <uni-list-item title="出车时间" show-arrow :right-text="actualDepartureTime" />
          <uni-list-item show-arrow title="回车时间">
            <template v-slot:footer>
              <uni-datetime-picker v-model="endTime">
                <view class="picker-value">{{ endTime || "请选择" }}</view>
              </uni-datetime-picker>
            </template>
          </uni-list-item>
        </uni-list>
        <sl-vehicle-violation></sl-vehicle-violation>
        <sl-vehicle-breakdown></sl-vehicle-breakdown>
        <sl-vehicle-accident></sl-vehicle-accident>
      </view>
    </scroll-view>
    <view class="toolbar">
      <button class="button" @tap="submit">提交登记</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
